<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="2"
          ><el-input
            size="mini"
            placeholder="楼宇名称"
            v-model="typeIndex"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="seach()"
            >查询</el-button
          ></el-col
        >
      </el-row>
    </el-card>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      row-key="id"
      :default-expand-all="false"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      style="margin-top: 1%; width: 60%; float: left"
    >
      <el-table-column label="id"   width="120">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.dicName }}
        </template>
      </el-table-column>
      <el-table-column label="编号/值" align="center">
        <template slot-scope="scope">
          {{ scope.row.dicValue }}
        </template>
      </el-table-column>
      <el-table-column label="类别" align="center">
        <template slot-scope="scope">
          <!-- 分类名称 1 7大行业 2 国民经济行业 3 辅料类 4 污染指数 5 标准 -->
          {{
            scope.row.dicType == 1
              ? "7大行业"
              : scope.row.dicType == 2
              ? "国民经济行业"
              : scope.row.dicType == 3
              ? "辅料类"
              : scope.row.dicType == 4
              ? "污染指数"
              : scope.row.dicType == 5
              ? "标准"
              : ""
          }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleAdd(scope.row.id)"
            >添加下级</el-button
          >
          <el-button size="mini" @click="handleLease(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div
      style="
        width: 35%;
        float: left;
        border: 1px solid #eee;
        padding: 1%;
        margin-top: 1%;
        margin-left: 1%;
      "
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.parentId"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.dicName"></el-input>
        </el-form-item>
        <el-form-item label="编号/值">
          <el-input v-model="form.dicValue"></el-input>
        </el-form-item>

        <el-form-item label="类别">
          <el-input v-model="form.dicType"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
    </el-dialog>
  </div>
</template>
  
  <script>
import { getEquipmentList, savedic } from "@/api/system";

export default {
  filters: {
    formatDate(value) {
      if (value) {
        return moment(value).format("YYYY-MM-DD");
      }
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogVisible: false,
      id: 2,
      typeIndex: 3,
      form: {
        dicName: "",
        dicType: null,
        dicValue: "0",
        parentId: 0,
        id: null,
      },
    };
  },
  created() {
    this.fetchData(this.typeIndex);
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
      getEquipmentList(obj)
        .then((response) => {
          console.log(response);
          this.listLoading = false;
          this.list = response.data;
        })
        .catch((error) => {
          this.listLoading = false;
          console.log(error);
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    seach() {
      this.fetchData(this.typeIndex);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleAdd(id) {
      // this.id = id;
      // this.dialogVisible = true;
      this.form.parentId = id;
    },
    onSubmit() {
      console.log(this.form);
      this.form.dicType = this.typeIndex;
      this.listLoading = true;
      savedic(this.form)
        .then((res) => {
          console.log(res);
          this.listLoading = false;
          this.fetchData(this.typeIndex);
          this.form.id = null;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleLease(obj) {
      this.form.id = obj.id;
      this.form.dicName = obj.dicName;
      this.form.parentId = obj.parentId;
      this.form.dicValue = obj.dicValue;
      this.form.dicType = obj.dicType;
    },
  },
};
</script>
  